import * as React from 'react'
import classNames from 'classnames'
import { CardGroupProps, CardGroupState, CardGroupContextInteface } from './interface'


// Card组件上下文
export const CardGroupContext = React.createContext<CardGroupContextInteface>({})

class CardGroup extends React.Component<CardGroupProps, CardGroupState> {
  static contextType = CardGroupContext
  static defaultProps = {
    prefixCls: 'layui-collapse'
  }
  constructor(props: CardGroupProps) {
    super(props)
    const { activeKey, defaultActiveKey } = props
    this.state = {
      activeKey, defaultActiveKey
    }
  }

  updateActiveKey = (updateKey: string) => {
    const { activeKey, onChange } = this.props
    if (activeKey) { // 不再内部控制
      if (onChange) {
        onChange(updateKey, (changeKey: string) => {
          this.setState({
            activeKey: changeKey
          })
        })
      }
    } else {
      this.setState({
        activeKey: updateKey
      })
    }
  }

  render() {

    const {
      className, children,
      prefixCls, defaultActiveKey: defaultActionKeyProps, activeKey: activeKeyProps,
      ...restProps
    } = this.props

    const { activeKey, defaultActiveKey } = this.state

    const classes = classNames(prefixCls, className, {

    })

    return (
      <CardGroupContext.Provider value={{ defaultActiveKey, activeKey, updateActiveKey: this.updateActiveKey }}>
        <div
          className={classes}
          {...restProps}
        >
          {children}
        </div>
      </CardGroupContext.Provider>
    )
  }
}
export default CardGroup